<template>
	<div id ="iterationmgr" class="my_panel">
		<div class="top_tools_bar">
			<el-row>
				<el-col :span="5">
					<i class="el-icon-arrow-left"></i>
					<el-button type="text" v-on:click="goBackToRmList()" style="font-size:16px">返回</el-button>
				</el-col>
				<el-col :span="18">
					<el-button type="primary" plain>分配story</el-button>
					<el-button type="primary" plain>取消分配story</el-button>
					<el-button type="danger" plain>清空全部</el-button>
				</el-col>
			</el-row>
		</div>
		<el-row>
			<el-col :span="24">
				 <div style="overflow:hidden;">
					    	<table id="planListTable" class="planList">
									<thead>
										<tr>
											<th>责任人</th>
											<th v-for="value in iterationDate">
												{{ value }}
											</th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="value in iterationStory">
											<td align="center">{{ value.owner }}</td>
											<template v-for="story in value.storyList">
												<td v-bind:colspan="story.workload" v-on:click="selecDate(story)" v-bind:style="{background: story.background}">
														{{ story.name }}
												</td>
											</template>
										</tr>
									</tbody>
				    		</table>
			    		</div>
			</el-col>
      </el-row>
      
	</div>
</template>

<script>
	export default {
			created(){
				this.dynHeight=document.documentElement.clientHeight-143+"px";
				
			},
			mounted(){
				var width = document.documentElement.clientWidth;
				var height = document.documentElement.clientHeight-80;
				this.fixTable("planListTable", 1, width, height);
			},
	    data() {
	      return {
	      	activeName: 'first',
	      	dynHeight : '',
	      	iterationPlanList: [{
	            name: '迭代1',
	            statue: '未开始',
	            creator: 'twx223386',
	            createtime: '2017-10-10',
	            starttime: '2017-10-10',
	            endtime: '2017-11-10',
	            storyNum: '15',
	            code: '75人天',
	         }],
	         iterationDate:[
	           '9.1',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2',
	           '9.2'
	         ],
	         iterationStory:[{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
					 },
					 {
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         },{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         },{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         },{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         },{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         },{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         },{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         },{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         },{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         },{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         },{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         },{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         },{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         },{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         },{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         },{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         },{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         },{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         },{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         },{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         },{
	           owner:'张三',
	           storyList:[{
	             name: '测试story',
	             workload: '2',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           },
	           {
	             name: '测试story',
	             workload: '1',
	             background: '#FFFFFF'
	             
	           }]
	         }]
	      }
		},
    methods: {
      selecDate(story){
        if(story.background == '#FFFFFF')
        {
          story.background='#40E0D0';
        } else {
          story.background='#FFFFFF';
        }
      },

			fixTable(TableID, FixColumnNumber, width, height) {
				/// <summary>
				///   锁定表头和列
				///   <para> sorex.cnblogs.com </para>
				/// </summary>
				/// <param name="TableID" type="String">
				///   要锁定的Table的ID
				/// </param>
				/// <param name="FixColumnNumber" type="Number">
				///   要锁定列的个数
				/// </param>
				/// <param name="width" type="Number">
				///   显示的宽度
				/// </param>
				/// <param name="height" type="Number">
				///   显示的高度
				/// </param>
				if ($("#" + TableID + "_tableLayout").length != 0) {
					$("#" + TableID + "_tableLayout").before($("#" + TableID));
					$("#" + TableID + "_tableLayout").empty();
				}
				else {
					$("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
				}
				$('<div id="' + TableID + '_tableFix"></div>'
				+ '<div id="' + TableID + '_tableHead"></div>'
				+ '<div id="' + TableID + '_tableColumn"></div>'
				+ '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");
				var oldtable = $("#" + TableID);
				var tableFixClone = oldtable.clone(true);
				tableFixClone.attr("id", TableID + "_tableFixClone");
				$("#" + TableID + "_tableFix").append(tableFixClone);
				var tableHeadClone = oldtable.clone(true);
				tableHeadClone.attr("id", TableID + "_tableHeadClone");
				$("#" + TableID + "_tableHead").append(tableHeadClone);
				var tableColumnClone = oldtable.clone(true);
				tableColumnClone.attr("id", TableID + "_tableColumnClone");
				$("#" + TableID + "_tableColumn").append(tableColumnClone);
				$("#" + TableID + "_tableData").append(oldtable);
				$("#" + TableID + "_tableLayout table").each(function () {
					$(this).css("margin", "0");
				});
				var HeadHeight = $("#" + TableID + "_tableHead thead").height();
				HeadHeight += 2;
				$("#" + TableID + "_tableHead").css("height", HeadHeight);
				$("#" + TableID + "_tableFix").css("height", HeadHeight);
				var ColumnsWidth = 0;
				var ColumnsNumber = 0;
				$("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
					ColumnsWidth += $(this).outerWidth(true);
					ColumnsNumber++;
				});
				ColumnsWidth += 2;
				// if ($.browser.msie) {
				// 	switch ($.browser.version) {
				// 		case "7.0":
				// 			if (ColumnsNumber >= 3) ColumnsWidth--;
				// 			break;
				// 		case "8.0":
				// 			if (ColumnsNumber >= 2) ColumnsWidth--;
				// 			break;
				// 	}
				// }
				$("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
				$("#" + TableID + "_tableFix").css("width", ColumnsWidth);
				$("#" + TableID + "_tableData").scroll(function () {
					$("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
					$("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
				});
				$("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
				$("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
				$("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
				$("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
				if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
					$("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
					$("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
				}
				if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
					$("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
					$("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
				}
				$("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
				$("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
				$("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
				$("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
			}
    }
	}
</script>

<style>
.planList{
	border-collapse:collapse
}
.planList th{
	min-width: 80px;
	width: 80px;
	font-size: 14px;
	border:1px solid #9E9E9E;
	
	height:30px;
}

.planList td{
	min-width: 80px;
	width: 80px;
	font-size: 12px;
	border:1px solid #9E9E9E;
	
	height:30px;
}
</style>